<template>
  <div class="herb-list-container">
    <el-card shadow="hover" class="herb-card">
      <h2>药品科普</h2>

      <!-- 栏目切换 -->
      <div class="tab-bar">
        <el-button
            v-for="tab in tabs"
            :key="tab.type"
            :type="activeTab === tab.type ? 'primary' : 'default'"
            @click="switchTab(tab.type)"
            round
        >
          {{ tab.label }}
        </el-button>
      </div>

      <!-- 药品列表 -->
      <el-row :gutter="20" justify="start">
        <el-col
            v-for="(item, index) in displayedItems"
            :key="index"
            :span="4"
            :xs="12"
            :sm="8"
            :md="6"
            :lg="4"
            style="margin-bottom: 20px;"
        >
          <el-card
              shadow="hover"
              class="herb-item"
              @click="goToDetail(item)"
          >
            <img :src="item.image" alt="药品图片" class="herb-image" />
            <p class="herb-name">{{ item.name }}</p>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'HerbList',
  data() {
    return {
      activeTab: 'herb', // 当前选中的栏目：herb（中药） / western（西药）
      tabs: [
        { type: 'herb', label: '常见中药' },
        { type: 'western', label: '常见西药' }
      ],
      // 中药数据
      herbs: [
        { id: 1, name: '当归', image: 'src/assets/images/yaocai/01.png' },
        { id: 2, name: '枸杞', image: 'src/assets/images/yaocai/02.png' },
        { id: 3, name: '莲子', image: 'src/assets/images/yaocai/03.png' },
        { id: 4, name: '百合', image: 'src/assets/images/yaocai/04.png' },
        { id: 5, name: '玉竹', image: 'src/assets/images/yaocai/05.png' },
        { id: 6, name: '茯苓', image: 'src/assets/images/yaocai/06.png' },
        { id: 7, name: '灵芝', image: 'src/assets/images/yaocai/07.png' },
        { id: 8, name: '三七', image: 'src/assets/images/yaocai/08.png' },
        { id: 9, name: '杜仲', image: 'src/assets/images/yaocai/09.png' },
        { id: 10, name: '熟地黄', image: 'src/assets/images/yaocai/10.png' },
        { id: 11, name: '山楂', image: 'src/assets/images/yaocai/11.png' },
        { id: 12, name: '银耳', image: 'src/assets/images/yaocai/12.png' },
        { id: 13, name: '陈皮', image: 'src/assets/images/yaocai/13.png' },
        { id: 14, name: '红枣', image: 'src/assets/images/yaocai/14.png' },
        { id: 15, name: '薏米', image: 'src/assets/images/yaocai/15.png' },
        { id: 15, name: '花旗参', image: 'src/assets/images/yaocai/16.png' },
        { id: 15, name: '川贝母', image: 'src/assets/images/yaocai/17.png' },
        { id: 15, name: '丹参', image: 'src/assets/images/yaocai/18.png' }
      ],
      // 西药数据
      westernMedicines: [
        { id: 101, name: '复方氨酚烷胺胶囊', image: 'src/assets/images/yaocai/101.png' },
        { id: 102, name: ' 银翘解毒片', image: 'src/assets/images/yaocai/102.png' },
        { id: 103, name: '急支糖浆', image: 'src/assets/images/yaocai/103.png' },
        { id: 104, name: '橘红痰咳液', image: 'src/assets/images/yaocai/104.png' },
        { id: 105, name: '奥美拉唑肠溶胶囊', image: 'src/assets/images/yaocai/105.png' },
        { id: 106, name: '多潘立酮片', image: 'src/assets/images/yaocai/106.png' },
        { id: 107, name: ' 阿司匹林泡腾片', image: 'src/assets/images/yaocai/107.png' },
        { id: 108, name: '双氯芬酸钠缓释片', image: 'src/assets/images/yaocai/108.png' },
        { id: 109, name: '云南白药气雾剂', image: 'src/assets/images/yaocai/109.png' },
        { id: 110, name: '红霉素软膏', image: 'src/assets/images/yaocai/110.png' },
        { id: 111, name: '氯雷他定片', image: 'src/assets/images/yaocai/111.png' },
        { id: 112, name: '西瓜霜含片', image: 'src/assets/images/yaocai/112.png' },
        { id: 113, name: '藿香正气水', image: 'src/assets/images/yaocai/113.png' },
        { id: 114, name: '风油精', image: 'src/assets/images/yaocai/114.png' },
        { id: 115, name: '硝酸甘油片', image: 'src/assets/images/yaocai/115.png' },
        { id: 116, name: '正红花油', image: 'src/assets/images/yaocai/116.png' },
        { id: 117, name: '清凉油', image: 'src/assets/images/yaocai/117.png' },
        { id: 118, name: '花露水', image: 'src/assets/images/yaocai/118.png' }
      ]
    };
  },
  computed: {
    displayedItems() {
      return this.activeTab === 'herb' ? this.herbs : this.westernMedicines;
    }
  },
  methods: {
    switchTab(type) {
      this.activeTab = type;
    },
    goToDetail(item) {
      this.$router.push({
        name: 'HerbDetail',
        params: {
          id: item.id,
          name: item.name,
          type: this.activeTab,
          image: item.image
        }
      });
    }
  }
};
</script>

<style scoped>
.herb-list-container {
  max-width: 1200px;
  margin: 40px auto;
  padding: 20px;
}

.herb-card {
  border-radius: 10px;
  background-color: #ffffff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  padding: 30px;
}

.tab-bar {
  margin-bottom: 20px;
  text-align: left;
}

.herb-item {
  cursor: pointer;
  text-align: center;
  transition: transform 0.2s ease-in-out;
}

.herb-item:hover {
  transform: translateY(-5px);
}

.herb-image {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 6px;
}

.herb-name {
  margin-top: 10px;
  font-size: 14px;
  color: #333;
}
</style>